<template>
  <div class="login">
    <div class="login-logo">
      <img src="../../assets/login.png" alt="">
    </div>
    <div class="login-content">
      <div class="form">
        <div class="title">欢迎注册创思设备管理系统</div>
        <div class="form-title">姓名</div>
        <el-input class="input" v-model="name" />
        <div class="form-title">邮箱</div>
        <el-input class="input" v-model="mailbox" @blur="handelBlur"/>
        <div class="checking" v-if="isShow">请输入正确的邮箱格式</div>
        <div class="form-title">密码</div>
        <el-input class="input" v-model="password" type="password" show-password />
        <div class="strength">密码强度 <span :style="{color: activeColor}">{{strength}}</span></div>
        <el-checkbox class="agreement" v-model="isAgree" size="small" >
          <span class="font">我已阅读用户协议并同意</span>
        </el-checkbox>
        <button class="button" @click="registerClick" >注册</button>
        <div class="no-account">
          <div>
            <span>您已经有平台账号？</span>
            <span class="go-login" @click="goLogin">用户登录</span>
          </div>
          <div>
            <span class="forgot" @click="goFgPassword">忘记密码</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref , computed } from 'vue'
import { useStore } from 'vuex'
import router from '../../router/index'

import { isMailbox , passwordStrength , debounce } from '../../utils/formValidation'

export default {
  setup() {
    const store = useStore()
    const name = ref('')
    const mailbox = ref('')
    const isShow = ref(false)
    //邮箱验证
    const handelBlur = (event) => {
      isShow.value = !isMailbox(event.target.value)
    }
    const password = ref('')
    // 密码强度
    const strength = computed( () => {
      return passwordStrength(password.value)
    })
    const activeColor = computed( () => {
      if(strength.value === '强') return 'red'
      if(strength.value === '中') return 'blue'
      if(strength.value === '弱') return 'green'
    })

    const isAgree = ref(false)

    // 注册逻辑
    const registerFun = () => {
      // 1.验证邮箱格式
      if (!isAgree.value) return
      // 2.注册
      store.dispatch( 'login/RegisterAction' , {name: name.value , mailbox: mailbox.value , password: password.value})
    }
    // 防抖
    const registerClick = debounce(registerFun , 500)

    const goLogin = () => {
      router.push('/login')
    }
    const goFgPassword = () => {
      router.push('/fgPassword')
    }
    return {
      name,
      mailbox,
      handelBlur,
      isShow,
      password,
      strength,
      activeColor,
      isAgree,
      registerClick,
      goLogin,
      goFgPassword
    }
  }
}
</script>

<style lang="less">
.login{
  width: 14.40rem;
  height: 10.24rem;
  .login-logo{
    float: left;
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(154, 154, 235, 0.5);
      img{
        position: absolute;
        left: 0.99rem;
        top: 2.93rem;
        width:5.67rem;
        height: 3.39rem;
      }
  }
  .login-content{
    float: right;
    width: 50%;
    height: 100%;
    .form{
      position: absolute;
      top: 2rem;
      left: 8.47rem;
      width: 4.46rem;
      font-weight: 400;
      .title{
        margin-bottom: 0.325rem;
        text-align: center;
        font-size: 0.32rem;
      }
      .form-title{
        font-size: 0.24rem;
      }
      .input{
        margin: 0.198rem 0;
        width: 4.46rem;
        height: 0.55rem;
        font-size: 0.22rem;
        border-color: #4D4DDB;
      }
      .checking{
        margin-top: -0.198rem;
        color: red;
        font-size: 0.12rem;
      }
      .strength{
        margin-bottom: 0.19rem;
        font-size: 0.2rem;
      }
      .agreement{
        width: 2.2rem;
        height: 0.23rem;
        line-height: 0.23rem;
        .font{
          font-size: 0.2rem;
        }
      }
      .button{
        display: block;
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
        width: 100%;
        height: 0.55rem;
        background-color: #1E1E1E;
        color: #FFFFFF;
        border-radius: 8px;
      }
      .no-account{
        display: flex;
        justify-content: space-between;
        font-size: 0.2rem;
        .go-login{
          color: #4D4DDB;
          cursor:pointer;
        }
        .forgot{
          cursor:pointer;
        }
      }
    }
  }
}
</style>